<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>

		.box{
			width: 10em;
			height: 10em;
			border-radius: 50%;
			position: relative;
			box-sizing: border-box;
			position: relative;
		}
		.word{
			text-align: center;
			line-height: calc( 10em - 40px );
			position:absolute;
			float: none !important;
			left: 0;
			top: 0;
			width: 10em;
			height: 10em;
			border-radius: 50%;
			box-sizing: border-box;
			border:20px solid red;
			box-shadow: 2px 2px 2px #c8ff00;
			border: 19px solid #00eeff;
			box-shadow:2px 2px 3px 1px #00ffa1, -2px -3px 3px 1px #ffdd00;
			background-color: #fff;
		}
		.word::after{
			content: "%";
		}
		.l,.r{
			float: left;
			width: 5em;
			height: 10em;
			overflow: hidden;
			--left:0deg;
			--right:0deg;
		}
		.l{
			border-radius:10em 0 0 10em ;
			transform: rotate(0);
			transform-origin: right center;
		}
		.r{
			border-radius:  0 10em 10em 0 ;
			transform:rotate(0deg);
			transform-origin: left center;
		}
		@keyframes l{
			0%{
				transform:rotate(-45deg) rotate(0deg);
			}
			49%{
				transform:rotate(-45deg) rotate(0deg);
			}
			50%{
				transform:rotate(-45deg) rotate(0deg);
			}
			100%{
				transform:rotate(-45deg) rotate(180deg);
			}
		}
		@keyframes r{
			0%{
				transform:translateX(-50%) rotate(-45deg) rotate(0deg);
			}
			50%{
				transform:translateX(-50%) rotate(-45deg) rotate(180deg);
			}
			100%{
				transform:translateX(-50%) rotate(-45deg) rotate(180deg);
			}
		}
		.l::after,.r::after{
			animation-timing-function: linear;
		}
		.l::after{
			content: "";
			width: 10em;
			height: 10em;
			border-radius:10em 0 0 10em ;
			display: block;
			box-sizing: border-box;
			transform-origin:  center;
			border-radius: 10em;
			border: 20px solid #ffffff;
			border-right-color: transparent;
			border-bottom-color: transparent;
			transform:rotate(-45deg) rotate(var(--left));
			/* animation: l 2s infinite forwards; */
		}
		.r::after{
			content: "";
			width: 10em;
			height: 10em;
			border-radius:  0 10em 10em 0 ;
			display: block;
			box-sizing: border-box;
			transform-origin:  center;
			border-radius: 10em;
			border:20px solid #ffffff;
			border-left-color: transparent;
			border-top-color: transparent;
			transform:translateX(-50%) rotate(-45deg) rotate(var(--right));
			/* animation: r 2s infinite forwards; */
		}
	</style>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>
	<input type="text" id="aa">
	<script>
		const aa=document.getElementById("aa")
		aa.oninput=(a)=>{
			console.log("a:",a);
			if(/\./.test(a.data)){
				aa.value=aa.value.slice(0,-1)
			}
		}

	</script>
	<div class="box">
		<div class="word" id="word">
			0
		</div>
		<div class="l" id="left">
			
		</div>
		<div class="r" id="right"></div>
		<!-- <div class="progress-overlay"></div> -->
	</div>
	<div id="app"><canvas id="c" @click="aaa" onclick="aaa()">123132</canvas>{{ message }}</div>

	<div id="ccc">
		
	</div>
	<!-- <canvas id="c" onclick="aaa()">123132</canvas> -->
	<script>
		function aaa(){
			console.log("111111:",111111);
			a()
		}

		function a(){
			console.log("1:",1);
		}

		
		const { createApp } = Vue
  
		createApp({
			data() {
				return {
					message: 'Hello Vue!'
				}
			},
			methods: {
				aaa(){
					console.log("22222:",22222);
				}
			}
		}).mount('#app')
		const max=360,min=0
		let num=0
		const left=document.getElementById("left")
		const right=document.getElementById("right")
		const word=document.getElementById("word")

		function draw(){
			if(num<=180){
				left.style.setProperty("--left",0+'deg')
				right.style.setProperty("--right",num+'deg')
			}else{
				left.style.setProperty("--left",num-180+'deg')
				right.style.setProperty("--right",180+'deg')
			}
			word.textContent=new Number(num/max*100).toFixed(2)
		}
		setInterval(()=>{
			num+=1.0
			draw()
			if(num>360){
				num=0
			}
		},0)

		const c=document.getElementById("c")
		const ccc=document.getElementById("ccc")
		c.width=300
		c.height=300
		const ctx=c.getContext("2d")

		let l=0

		ctx.lineWidth="6";
		setInterval(()=>{
			l+=0.001
			ctx.clearRect(0,0,300,300)
			ctx.beginPath();
			ctx.arc(100,100,50,0,2*Math.PI*l)
			ctx.rotate(-90*Math.PI/180);
			ctx.stroke();
		},0)
		function callback(mutationList, observer) {
			console.log(mutationList, observer)
		}
		var observer = new MutationObserver(callback);
		var observerOptions = {
			attributes: true, // 观察属性变动
		}
		observer.observe(ccc, observerOptions);
		document.body.onresize=function(e){
			console.log("e:",e);
		}
	</script>
</body>
</html>